<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        Vue中使用组件的三大步骤:
            一、定义组件(创建组件)
            二、注册组件
            三、使用组件(写组件标签)

        一、如何定义一个组件?
            使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别;
            区别如下:
                1.el不要写，为什么?最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
                2.data必须写成函数，为什么?避免组件被复用时，数据存在引用关系。
        备注:使用template可以配置组件结构。

        二、如何注册组件?
            1.局部注册:靠new Vue的时候传入components选项
            2.全局注册:靠vue.component('组件名’,组件)

        三、编写组件标签: 
    -->
    <school></school>

    <div id="app">
        <h1 v-text="message"></h1>
        <hr/>
        <!-- 第三步：编写组件标签 -->
        <school></school>
        <hr/>
        <!-- 第三步：编写组件标签 -->
        <student></student>
        <hr/>
        <student></student>
    </div>

    <div id="app2">
        <hello></hello>
    </div>

    <script>
    //配置好全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
        //第一步：创建school组件
        const school=Vue.extend({
            template:`
                <div>
                    <h2>学校名字：{{schoolName}}</h2>
                    <h2>学校地址：{{address}}</h2>
                    <button @click="showName">点我提示学校名</button>
                </div>
            `,
            //el:'#app',//定义组件的时候一定不要写el配置项，因为最终所有组件都会被一个vm所管理，由vm决定那个组件服务谁
            data(){
                return{
                    schoolName: "尚硅谷",
                    address: "北京昌平"
                }
            },
            methods: {
                showName(){
                    alert(this.schoolName);
                }
            }
        });

        //第一步：创建student组件
        const student=Vue.extend({
            template:`
                <div>
                    <h2>学生名字：{{studentName}}</h2>
                    <h2>年龄：{{age}}</h2>
                </div>
            `,
            data(){
                return {
                    studentName: "张三",
                    age: 18
                }
            }
        });

        //第一步：创建组件
        const hello=Vue.extend({
            template:`
                <div>
                    <h2>你好啊！{{name}}</h2>
                </div>
            `,
            data() {
                return {
                    name: 'Tom'
                }
            }
        });

        //第二部注册全局组件
        Vue.component('hello',hello);//第一个参数为组件的名字，第二个参数为被定义的组件

        var vm = new Vue({
           el:'#app',
           data:{
                message: '你好啊！'
           },
           //第二步：注册组件(局部注册)
           components:{
            //    xuexiao:school,
            //    xuesheng:student
            //简写方式
                school,
                student
           }
        });

        new Vue({
            el:'#app2'
        });
    </script>
</body>

</html>